import styled from "styled-components";

export const RecommendItem_style = styled.div`
  width: 165px;
  height: 300px;
  margin: 0.5rem auto;
  & .RecommendItem_img {
    width: 100%;
    height: 200px;
    border-radius:10px;
    background-color:gray;
  }
`;

export const TextContent = styled.div`
  @keyframes dynamics {
    0% {
      background-position: 0% 0%;
    }

    50% {
      background-position: 50% 100%;
    }

    100% {
      background-position: 100% 0%;
    }
  }
  width: 100%;
  height: 100px;
  border-radius:10px;
  background: linear-gradient(
    90deg,
    #2677ef,
    #08505f,
    #aed7ce,
    #08505f,
    #2677ef
  );
  background-size: 1400% 300%;
  animation: dynamics 20s ease infinite;
  -webkit-animation: dynamics 20s ease infinite;
  -moz-animation: dynamics 20s ease infinite;
  & .RecommendItem_text {
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  & .RecommendItem_time {
    font-size: 10px;
    color: gray;
  }
  & .RecommendItem_price {
    font-size: 17px;
    color: #ee3537;
  }
`;
